import { useEffect, useState } from "react";

import PubSub from "pubsub-js";

export default function A() {
  const [count, setCount] = useState(0);

  // 1. 订阅消息只能做一次 -> 问题：count数据不更新，永远拿到第一次的值
  // useEffect(() => {
  //   PubSub.subscribe("setCount", () => {
  //     // 当触发订阅消息时，就会执行回调函数
  //     setCount(count + 1);
  //     console.log("subscribe回调函数触发了");
  //   });
  // }, []);

  // 2. 订阅消息在初始化渲染和更新时都触发 -> 问题：消息会重复订阅多次，导致内存泄漏
  // useEffect(() => {
  //   PubSub.subscribe("setCount", () => {
  //     // 当触发订阅消息时，就会执行回调函数
  //     setCount(count + 1);
  //     console.log("subscribe回调函数触发了");
  //   });
  // }, [count]);

  // 3. 在更新前将之前消息取消订阅，再订阅新消息
  useEffect(() => {
    // 订阅消息
    PubSub.subscribe("setCount", (message, val) => {
      // 当触发订阅消息时，就会执行回调函数
      setCount(count + val.c);
      console.log("subscribe回调函数触发了");
    });
    return () => {
      // 取消订阅上一次消息
      PubSub.unsubscribe("setCount");
    };
  }, [count]);

  return <div>A - count：{count}</div>;
}
